<!--
 * @Author: @yzcheng
 * @Date: 2021-04-01 09:14:34
 * @Version: 1.0
 * @LastEditors: Iseven Monkey <iswoter@gmail.com>
 * @Description: 
 * @LastEditTime: 2022-01-19 01:02:49
-->
<template>
  <div :class="$style.aside">
    <el-menu
      active-text-color="rgb(12, 138, 255)"
      :class="$style.menu"
      :default-active="$route.path"
      :uniqueOpened="true"
      :collapse="isCollapse"
      router
    >
      <layout-aside-item v-for="item in menu" :key="item.path" :item="item" />
    </el-menu>
    <div :class="$style['btn-collapse-container']">
      <i
        @click="isCollapse = !isCollapse"
        :class="[
          isCollapse ? 'el-icon-s-fold down_icon' : 'el-icon-s-unfold down_icon',
          $style['btn-collapse'],
        ]"
      ></i>
    </div>
  </div>
</template>

<script>
import navData from '@/i18n/nav.json'
import LayoutAsideItem from './LayoutAsideItem'
import { USE_REMOTE_ROUTE_TABLE } from '@/utils/routes'
import { getRoutes } from '@/api/global'
import { dyncRoutes } from '@/utils/routes'

export default {
  data() {
    return {
      isCollapse: false,
      menu: [],
      res: [],
    }
  },
  components: {
    LayoutAsideItem,
  },
  inject: ['app'],
  methods: {
    setCollapse() {
      this.isCollapse = false
    },
  },
  async mounted() {
    if (USE_REMOTE_ROUTE_TABLE) {
      this.res = await getRoutes({ method: 'get' })
      const rst = this.res.data.data.filter((item) => {
        return item.path === 'base-data/basedata'
      })
      this.menu = dyncRoutes(rst[0].children || [])
    } else {
      this.menu = navData['zh-cn']
      this.menu = this.menu[1].children[4].children
      console.log(this.menu, 'menu')
    }
  },
}
</script>

<style lang="scss" module>
.aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 0;
  .menu {
    flex: 1;
    max-height: calc(100vh - 110px);
    overflow: hidden;
  }
}
.down_icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}
.btn-collapse-container {
  height: 50px;
  .btn-collapse {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
  }
}
</style>
